<template>
    <div class="box-html-container">
            <div class="box-box-wrapper">
                <div class="box-box-img-container">
                        <el-avatar
                                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                                :size="120">
                        </el-avatar>
                </div>
            <div class="login_input_cantainer">
                <div class="loggin_input_wrapper">
                   <div>
                       <el-input
                               placeholder="请输入账户"
                               prefix-icon="el-icon-user"
                               v-model="userName">
                       </el-input>
                   </div>
                    <div class="login_input_box">
                        <el-input
                                placeholder="请输入密码"
                                prefix-icon="el-icon-lock"
                                v-model="passWord"
                                @blur="onblur">
                        </el-input>
                    </div>
                    <div class="login_button_box">
                        <el-button type="primary" size="small" @click="onclick">登录</el-button>
                        <el-button type="info" size="small" @click="onclickclean">重置</el-button>
                    </div>
                </div>

            </div>
            </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                userName:'',
                passWord:'',
            }
        },
        methods:{
            onblur(){
                //判断密码不能为空
                if (this.passWord==''){
                    this.$message('密码不能为空')
                    return
                }
            },
            onclick(){
                //判断账号和密码都不能为空的情况
                if (this.userName==''||this.passWord==''){
                    this.$message('用户名密码有误，请重新输入')
                    return
                }else {
                    //获取账号密码接口数据
                    this.$axios.get('https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey',{
                        params:{
                            mobile:this.userName,   //后台数据账号
                            pwd:this.passWord          //后台数据密码
                        }
                    }).then(res=>{
                        console.log(res)
                        var msg=res.data.msg    //获取后台msg值
                        this.$message(msg)
                        if (res.data.code==0){  //判断如果当前后台数据code值==0，也就是成功
                            var token=res.data.data.token   //成功情况下，保存token值
                            window.localStorage.setItem('token',token)//保存token值到本地
                            this.$router.push({path:'/'})   //跳转路由到主页
                        }
                    }).catch(error=>{
                        console.log(error)
                    })
                }
            },
            onclickclean(){
                this.userName=''
                this.passWord=''
            }
        },

    }
</script>

<style scoped>
    .box-html-container{
        width: 100vw;
        height: 100vh;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background-color: #2B4B6B;
    }
    .box-box-wrapper{
        width: 40%;
        height: 300px;
        background-color: #fff;
    }
    .box-box-img-container{
        width: 100%;
        height: 10px;
        background-color: #2B4B6B;
        display: inline-flex;
        justify-content: center;
        align-items: center;

    }
    .login_input_cantainer
    {
        width: 100%;
        height: 77%;
        /*background-color: yellow;*/
        display: inline-flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    .loggin_input_wrapper
    {
        width: 70%;
        height: 80%;
        /*background-color: gray;*/
    }
    .login_input_box
    {
        margin-top: 25px;
    }
    .login_button_box
    {
        width: 100%;
        display: inline-flex;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 25px;
    }
</style>